<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视差滚动相册</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fffaff;
        }
        main {
            display: grid;
            gap: 2rem; /* 列间距 */
            grid-template-columns: repeat(3, 500px); /* 列数和列宽 */
            overflow-y: hidden; /* Y轴溢出隐藏 */
            padding: 50px; /* 内边距 */
        }
        section {
            display: flex;
            gap: 2rem; /* 列间距 */
            flex-direction: column; /* 垂直排列图片 */
        }
        /* 第一列和第三列 */
        section:nth-child(1),
        section:nth-child(3) {
            /* 应用平滑的动画 */
            animation: scroller linear;
            /* 动画根据滚动进行 */
            animation-timeline: scroll(root);
            /* 子元素反转排列 */
            flex-direction: column-reverse;
            /* 初始位置设置为底部 */
            translate: 0% calc(-100% + 100vh);
        }
        section img {
            box-shadow: 0 0 10px #0002;
            border-radius: 5px;
            transition: .3s;
        }
        section img:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(150, 50, 50, 0.5);
        }
        @keyframes scroller {
            to {
                /* 最终位置设置为顶部 */
                translate: 0% calc(100% - 100vh);
            }
        }
    </style>
</head>
<body>
    <main>
        <section>
            <img src="./img/01.jpeg">
            <img src="./img/02.jpeg">
            <img src="./img/03.jpeg">
            <img src="./img/04.jpeg">
            <img src="./img/05.jpeg">
            <img src="./img/06.jpeg">
        </section>

        <section>
            <img src="./img/07.jpeg">
            <img src="./img/08.jpeg">
            <img src="./img/09.jpeg">
            <img src="./img/10.jpeg">
            <img src="./img/11.jpeg">
            <img src="./img/12.jpeg">
        </section>

        <section>
            <img src="./img/13.jpeg">
            <img src="./img/14.jpeg">
            <img src="./img/15.jpeg">
            <img src="./img/16.jpeg">
            <img src="./img/17.jpeg">
            <img src="./img/03.jpeg">
        </section>
    </main>
</body>
</html>